<template>
	<view class="couponAll">
		<view class="titletree">
			<p>未使用</p>
			<p>已使用</p>
			<p>已过期</p>
		</view>
		<!-- 未使用 -->
		<view class="couponbodyA couponbody">
			<image src="../../static/integralrule/youhui.png" mode=""></image>
			<span>暂无优惠券</span>
			<button>进店逛逛</button>
		</view>
		<!-- 已使用 -->
		<view class="couponbodyB couponbody">
			<image src="../../static/integralrule/youhui.png" mode=""></image>
			<span>暂无优惠券</span>
		</view>
		<!-- 已过期 -->
		<view class="couponbodyC couponbody">
			<view class="couponPrice">
				<view class="couponPriceA">
					<view class="PriceNine">
						<p>8.72</p>
						<span>元</span>
					</view>
					<span class="manjianS">满99元可用</span>
				</view>
				<view class="couponPriceB">
					<p>满100元减1-10元</p>
					<span>2023-03-17至2023-03-24</span>
				</view>
			</view>
		</view>
		<view class="couponfoot">
			<p>兑换优惠券</p>
		</view>
	</view>
</template>

<script>
	
</script>

<style lang="scss" scoped>
	.couponAll {
		background: #F7F8FA;
	}

	.titletree {
		height: 90rpx;
		background-color: white;
		display: flex;
		justify-content: space-around;
	}

	.titletree p {
		font-size: 30rpx;
		align-self: center;
		color: #646566;
		height: 100%;
		display: flex;
		line-height: 90rpx;
	}

	.titletree p:hover {
		color: black;
		border-bottom: 7rpx solid #1ba784;
	}

	.couponbody {
		height: 80vh;
		display: flex;
		flex-direction: column;
	}

	.couponbody image {
		height: 300rpx;
		width: 350rpx;
		align-self: center;
		margin-top: 70rpx;
	}

	.couponbody span {
		color: #969799;
		font-size: 28rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.couponbody button {
		height: 60rpx;
		width: 170rpx;
		background: white;
		border: 1rpx solid #1ba784;
		border-radius: 40rpx;
		font-size: 27rpx;
		line-height: 60rpx;
		color: #1ba784;
		margin-top: 70rpx;
	}

	.couponfoot {
		height: 90rpx;
		background: white;
	}

	.couponfoot p {
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.couponbodyA,
	.couponbodyB {
		display: none;
	}

	.couponbodyC {
		display: flex;
		flex-direction: column;
	}

	.couponPrice {
		margin-top: 20rpx;
		height: 200rpx;
		background: white;
		width: 90%;
		align-self: center;
		display: flex;
		border-radius: 20rpx 20rpx;
	}

	.couponPriceA {
		width: 35%;
		background: #c8c9cc;
		border-radius: 20rpx 0 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.PriceNine p {
		font-size: 55rpx;
		color: white;
		font-weight: 600;
		align-self: center;
	}

	.PriceNine {
		display: flex;
		align-self: center;
	}

	.PriceNine span {
		color: white;
		align-self: flex-end;
		margin-bottom: 30rpx;
		margin-left: 10rpx;
	}

	.couponPriceA .manjianS {
		align-self: center;
		color: white;
		margin-top: -60rpx;
	}

	.couponPriceB {
		width: 65%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.couponPriceB p {
		align-self: center;
		font-size: 30rpx
	}
</style>